<template>
  <transition name="confirm" duration="400">
    <div class="confirm-wrapper fixed-full-screen-wang"
         v-show="visible"
    >
      <div class="mask" @click="clickMask"></div>
      <div class="container">
        <div class="header">
          <span>{{ title }}</span>
          <svg-icon icon="close3"
                    @click="onCancelHandler"
                    class="icon"/>
        </div>
        <div class="body">
          <svg-icon icon="warning" class="warning-icon"/>
          <span class="message">{{ message }}</span>
        </div>
        <div class="footer">
          <div class="button cancel" @click.prevent.stop="onCancelHandler">{{ cancelBtnText }}</div>
          <div class="button confirm" @click.prevent.stop="onConfirmHandler">{{ confirmBtnText }}</div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup>
import {SvgIcon} from "@/libs";
import {onMounted, ref} from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '温馨提示',
  },
  message: {
    type: String,
    default: "你确定要删除当前项吗"
  },
  cancelBtnText: {
    type: String,
    default: '取消'
  },
  confirmBtnText: {
    type: String,
    default: '确定'
  },
  onCancel: {
    type: Function,
  },
  onConfirm: {
    type: Function,
  },
})
const visible = ref(false)

function clickMask() {
  onCancelHandler()
}
const onCancelHandler = () => {
  props.onCancel && props.onCancel(false)
  visible.value = false
}
const onConfirmHandler = () => {
  props.onConfirm && props.onConfirm(true)
  visible.value = false
}
onMounted(() => {
  visible.value = true
})
</script>

<style scoped lang="scss">
.fixed-full-screen-wang {
  position: fixed;
  z-index: 9999;
  inset: 0 0 0 0;
  box-sizing: border-box;
  padding: 16px;
  overflow: hidden;

  .mask {
    position: absolute;
    inset: 0 0 0 0;
    background: rgba(0, 0, 0, .1);
    backdrop-filter: blur(3px);
  }

  .container {
    position: absolute;
    background: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 15px 20px;
    max-width: 420px;
    border: 1px solid #edeef5;
    box-shadow: 0 0 12px rgba(0, 0, 0, .12);
    overflow: hidden;
    backface-visibility: hidden;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .header {
      color: #303133;
      line-height: 1;
      font-size: 18px;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .icon {
        color: #909399;
        font-size: 13px;
        transition: color .2s ease;
        cursor: pointer;

        &:hover {
          color: #1890ff;
        }
      ;
      }
    }


    .body {
      display: flex;
      align-items: center;
      min-height: 80px;

      .warning-icon {
        color: #ffba00;
        font-size: 28px;
      }

      .message {
        word-break: break-word;
        color: #606266;
        font-size: 14px;
        margin-left: 10px;
      }
    }

    .footer {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
      gap: 30px;

      .button {
        border-radius: 3px;
        box-sizing: border-box;
        outline: none;
        background: #fff;
        border: 1px solid #dcdfe6;
        transition: all .1s ease;
        height: 32px;
        line-height: 1;
        white-space: nowrap;
        color: #606266;
        user-select: none;
        vertical-align: middle;
        padding: 8px 16px;
        font-size: 14px;

        &.cancel {
          &:hover, &:focus {
            color: #1890ff;
            background-color: #e8f4ff;
            border-color: #badeff;
          }

          &:active {
            background-color: #e8f4ff;
            border-color: #1890ff;
            color: #1890ff;
          }
        }

        &.confirm {
          background: #1890ff;
          color: #fff;
          border-color: #1890ff;

          &:hover, &:focus {
            color: #fff;
            background-color: #2f9bff;
            border-color: #2f9bff;
          }

          &:active {
            color: #fff;
            background-color: #2f9bff;
            border-color: #2f9bff;
          }
        }
      }
    }
  }
}
</style>
